<script setup>

import { ref } from 'vue';

const active = ref(0);
const productForm = ref({});

const next = () => {
    if (active.value < 3) {
        active.value++;
    }
};

const prev = () => {
    if (active.value > 0) {
        active.value--;
    }
};

const submit = () => {
    // 提交表单逻辑
};

</script>



<template>
    <div class="product-add">
        <el-steps :active="active" finish-status="success">
            <el-step title="填写商品信息"></el-step>
            <el-step title="填写商品促销"></el-step>
            <el-step title="填写商品属性"></el-step>
            <el-step title="选择商品关联"></el-step>
        </el-steps>

        <el-form :model="productForm" label-width="120px" v-show="active === 0">
            <!-- 第一步：填写商品信息 -->
            <el-form-item label="商品名称：">
                <el-input v-model="productForm.name"></el-input>
            </el-form-item>
            <!-- <el-form-item label="副标题：">
                <el-input v-model="productForm.subtitle"></el-input>
            </el-form-item> -->
            <el-form-item label="商品分类：">
                <el-select v-model="productForm.categoryId" placeholder="请选择">
                    <el-option label="选项1" value="1"></el-option>
                    <el-option label="选项2" value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品品牌：">
                <el-select v-model="productForm.brandId" placeholder="请选择品牌">
                    <el-option v-for="brand in brandList" :key="brand.id" :label="brand.brandName" :value="brand.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="商品介绍：">
                <el-input type="textarea" v-model="productForm.description"></el-input>
            </el-form-item>
            <el-form-item label="商品货号：">
                <el-input v-model="productForm.productSn"></el-input>
            </el-form-item>
            <el-form-item label="商品售价：">
                <el-input v-model.number="productForm.price"></el-input>
            </el-form-item>
            <!-- <el-form-item label="市场价：">
                <el-input v-model.number="productForm.marketPrice"></el-input>
            </el-form-item> -->
            <el-form-item label="商品库存：">
                <el-input v-model.number="productForm.stock"></el-input>
            </el-form-item>
            <!-- <el-form-item label="计量单位：">
                <el-input v-model="productForm.unit"></el-input>
            </el-form-item>
            <el-form-item label="商品重量：">
                <el-input v-model.number="productForm.weight"></el-input> 克
            </el-form-item> -->
            <!-- <el-form-item label="排序：">
                <el-input v-model.number="productForm.sortOrder"></el-input>
            </el-form-item> -->
        </el-form>

        <el-form :model="productForm" label-width="120px" v-show="active === 1">
            <!-- 第二步：填写商品促销 -->
            <el-form-item label="赠送积分：">
                <el-input v-model.number="productForm.giftPoint"></el-input>
            </el-form-item>
            <el-form-item label="赠送成长值：">
                <el-input v-model.number="productForm.giftGrowth"></el-input>
            </el-form-item>
            <el-form-item label="积分购买限制：">
                <el-input v-model.number="productForm.pointLimit"></el-input>
            </el-form-item>
            <el-form-item label="预告商品：">
                <el-switch v-model="productForm.previewStatus"></el-switch>
            </el-form-item>
            <el-form-item label="商品上架：">
                <el-switch v-model="productForm.publishStatus"></el-switch>
            </el-form-item>
            <el-form-item label="商品推荐：">
                <el-checkbox v-model="productForm.newStatus">新品</el-checkbox>
                <el-checkbox v-model="productForm.recommendStatus">推荐</el-checkbox>
            </el-form-item>
            <el-form-item label="服务保证：">
                <el-checkbox v-model="productForm.serviceReturn">无忧退货</el-checkbox>
                <el-checkbox v-model="productForm.serviceRefund">快速退款</el-checkbox>
                <el-checkbox v-model="productForm.serviceFreeShipping">免费包邮</el-checkbox>
            </el-form-item>
            <el-form-item label="详细页标题：">
                <el-input v-model="productForm.detailTitle"></el-input>
            </el-form-item>
            <el-form-item label="详细页描述：">
                <el-input type="textarea" v-model="productForm.detailDesc"></el-input>
            </el-form-item>
            <el-form-item label="选择优惠方式：">
                <el-radio-group v-model="productForm.promotionType">
                    <el-radio :label="0">无优惠</el-radio>
                    <el-radio :label="1">特惠促销</el-radio>
                    <el-radio :label="2">会员价格</el-radio>
                    <el-radio :label="3">阶梯价格</el-radio>
                    <el-radio :label="4">满减价格</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>

        <el-form :model="productForm" label-width="120px" v-show="active === 2">
            <!-- 第三步：填写商品属性 -->
            <el-form-item label="属性类型：">
                <el-select v-model="productForm.categoryId" placeholder="请选择分类">
                    <el-option v-for="category in categoryList" :key="category.id" :label="category.name"
                        :value="category.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="商品规格：">
                <el-input v-model="productForm.specification"></el-input>
            </el-form-item>
            <el-table :data="productForm.skus" style="width: 100%">
                <el-table-column prop="salePrice" label="销售价格"></el-table-column>
                <el-table-column prop="promotionPrice" label="促销价格"></el-table-column>
                <el-table-column prop="stock" label="商品库存"></el-table-column>
                <el-table-column prop="lowStock" label="库存预警值"></el-table-column>
                <el-table-column prop="skuCode" label="SKU编号"></el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button size="small" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button @click="refreshList">刷新列表</el-button>
            <el-button @click="syncPrice">同步价格</el-button>
            <el-button @click="syncStock">同步库存</el-button>
            <el-form-item label="商品参数：">
                <el-input type="textarea" v-model="productForm.parameters"></el-input>
            </el-form-item>
            <el-form-item label="商品相册：">
                <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
                    :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                    <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                    <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
            </el-form-item>
            <el-form-item label="商品详情：">
                <el-tabs v-model="activeTab">
                    <el-tab-pane label="电脑端详情" name="pc">
                        <tinymce-editor v-model="productForm.pcDetail" :height="300"></tinymce-editor>
                    </el-tab-pane>
                    <el-tab-pane label="移动端详情" name="mobile">
                        <tinymce-editor v-model="productForm.mobileDetail" :height="300"></tinymce-editor>
                    </el-tab-pane>
                </el-tabs>
            </el-form-item>
            <el-form-item label="版本号：">
                <el-input v-model.number="productForm.version" readonly />
            </el-form-item>
        </el-form>

        <el-form :model="productForm" label-width="120px" v-show="active === 3">
            <!-- 第四步：选择商品关联 -->
            <el-form-item label="关联专题：" class="transfer-container">
                <el-transfer v-model="productForm.selectedSubjects" :data="subjectOptions"
                    :titles="['待选择', '已选择']"></el-transfer>
            </el-form-item>
            <el-form-item label="关联优选：" class="transfer-container">
                <el-transfer v-model="productForm.selectedPreferences" :data="preferenceOptions"
                    :titles="['待选择', '已选择']"></el-transfer>
            </el-form-item>
        </el-form>

        <div class="step-action">
            <el-button @click="prev">上一步</el-button>
            <el-button type="primary" @click="next" v-if="active !== 3">下一步</el-button>
            <el-button type="primary" @click="submit" v-if="active === 3">完成，提交商品</el-button>
        </div>
    </div>
</template>



<style scoped>
/* 容器基础样式 */
.product-add {
    max-width: 1200px;
    /* 限制最大宽度 */
    width: 95%;
    /* 适应窄屏设备 */
    margin: 0 auto;
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    /* 添加卡片阴影 */
}

/* 步骤条样式增强 */
.el-steps {
    margin-bottom: 32px;
}

.el-step__title {
    font-weight: 600;
    color: #666;
}

.el-step__head.is-finish {
    color: #409EFF;
    border-color: #409EFF;
}

/* 表单布局优化 */
.el-form {
    margin-bottom: 40px;
    padding: 24px;
    background: #f9f9f9;
    border-radius: 8px;
}

/* 统一表单项宽度 */
.el-form-item {
    margin-bottom: 24px;
    /* 增加垂直间距 */
}

.el-select,
.el-input-number,
.el-input {
    width: 100%;
    /* 统一控件宽度 */
}

/* 特殊表单项样式 */
.price-range-item {
    display: inline-block;
    width: 200px;
    vertical-align: top;
    margin-left: 8px;
}

.search-mini-item {
    --el-input-width: 120px;
}

/* 按钮组样式 */
.step-action {
    margin-top: 32px;
    text-align: center;
}

.step-action .el-button {
    margin: 0 12px;
    padding: 12px 24px;
    transition: all 0.3s ease;
}

.step-action .el-button--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
}

/* 响应式适配 */
@media (max-width: 768px) {
    .product-add {
        padding: 16px;
    }

    .el-form {
        padding: 16px;
    }
}

/** 第三个表的样式 */
.transfer-container{
    margin-left: 14%;
}
</style>
